<template>
  <div>
    <div>
      <div>
        <a-transfer
          class="tree-transfer"
          :data-source="dataSource"
          :target-keys="targetKeys"
          :render="item => item.title"
          :show-select-all="false"
          @change="onChange"
        >
          <template
            slot="children"
            slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }"
          >
            <a-tree
              v-if="direction === 'left'"
              blockNode
              checkable
              checkStrictly
              defaultExpandAll
              :checkedKeys="[...selectedKeys, ...targetKeys]"
              :treeData="treeData"
              @check="
            (_, props) => {
              onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
            }
          "
              @select="
            (_, props) => {
              onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
            }
          "
            />
          </template>
        </a-transfer>
      </div>
    </div>
    <div>
      <a-input-search placeholder="请输入要查询的耳标号" style="width: 200px" @search="onSearch" />
    </div>
    <div>
      <a-select default-value="lucy" style="width: 120px" @change="handleChange($event)">
        <a-select-option value="jack">
          Jack
        </a-select-option>
        <a-select-option value="lucy">
          Lucy
        </a-select-option>
        <a-select-option value="disabled" disabled>
          Disabled
        </a-select-option>
        <a-select-option value="Yiminghe">
          yiminghe
        </a-select-option>
      </a-select>
    </div>
  </div>

</template>

<script>
  import {getAction} from "@api/manage";

  const treeData = [
    { key: '0-0', title: '0-0' },
    {
      key: '0-1',
      title: '0-1',
      children: [
        { key: '0-1-0', title: '0-1-0' },
        { key: '0-1-1', title: '0-1-1' },
      ],
    },
    { key: '0-2', title: '0-3' },
  ];

  const transferDataSource = [];
  function flatten(list = []) {
    list.forEach(item => {
      transferDataSource.push(item);
      flatten(item.children);
    });
  }
  flatten(JSON.parse(JSON.stringify(treeData)));

  function isChecked(selectedKeys, eventKey) {
    return selectedKeys.indexOf(eventKey) !== -1;
  }

  function handleTreeData(data, targetKeys = []) {
    data.forEach(item => {
      item['disabled'] = targetKeys.includes(item.key);
      if (item.children) {
        handleTreeData(item.children, targetKeys);
      }
    });
    return data;
  }

  export default {
    name: "Archives",
      data(){
          return{
            earMark:"123456789",
            defaultData:"ok",
            test:"",
            url:"/chm/chmBizCattleArchivesInfo/testData",
            targetKeys: [],
            dataSource: transferDataSource,
          }
      },
    computed: {
      treeData() {
        return handleTreeData(treeData, this.targetKeys);
      },
    },
      methods:{
          loadData(){
            getAction(this.url).then((res)=>{
              this.testData = res;
            })
          },
        onSearch(value){
          console.log(value);
        },
        handleChange(e){
            // this.defaultData = e.target.value
          console.log(e)
        },
        onChange(targetKeys) {
          console.log('Target Keys:', targetKeys);
          this.targetKeys = targetKeys;
        },
        onChecked(_, e, checkedKeys, itemSelect) {
          const { eventKey } = e.node;
          itemSelect(eventKey, !isChecked(checkedKeys, eventKey));
        },
      },
    created() {
          this.loadData()

    }
  }
</script>

<style scoped>

</style>